<template>
	<view class="container">
		<!-- 顶部导航栏 -->
	<!-- 	<view class="header">
			<view class="header-left" @click="goBack" :style="{ marginTop: safeTop + 'px' }">
				<image src="/static/base/back.svg" class="back-icon" mode="aspectFit" />
			</view>
			<view class="header-title" :style="{ marginTop: safeTop + 'px' }">我的团队</view>
			<view class="header-right"></view>
		</view> -->

		<scroll-view scroll-y class="content">
			<view :style="{ height: contentTop + 'px' }"></view>
		<!-- 团队统计 -->
			<view class="team-stats">
				<text>已邀请：{{ teamCount }}人</text>
			</view>
			<!-- <view class="like-list">
				<view v-for="item in teamList" :key="item.id" class="like-item" @click="goToWorkDetail(item.work_id,item.work_type)">
					<view class="avatar-container">
						<image :src="item.avatar || '/static/default-avatar.png'" class="user-avatar"
							mode="aspectFill" />
					</view>
					<view class="like-content">
						<view class="user-info">
							<text class="user-name">{{ item.nickname || '匿名用户' }}</text>
						</view>
					</view>
					<view style="text-align: right;">
						<text class="like-time">{{ formatDate(item.signing_time) }}</text>
					</view>
				</view>
			</view> -->
			
			
			<!-- 团队成员列表 -->
			<view class="member-list">
				<view v-for="(item, index) in teamList" :key="index" class="member-item">
					<view class="avatar-container">
						<image :src="item.avatar || '/static/images/f.png'" class="avatar" mode="aspectFill" />
					</view>
					<view class="member-info">
						<text class="user-name">{{ item.nickname || '匿名用户' }}</text>
						<text class="invite-time">{{ item.signing_time }}</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="teamList.length === 0 && !loading" class="empty-state" style="text-align: center;">
				<!-- <image src="/static/base/empty.png" class="empty-icon" mode="aspectFit" /> -->
				<image :src="imgHost + '/statics/images/no-thing.png'"></image>
				<view class="empty-text">暂无数据</view>
			</view>
			
			<view style="height: 83.6rpx;"></view>
			
		</scroll-view>
	</view>
</template>

<script>
	import TableBar from '@/components/base/table-bar/Index.vue'
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		getTeam_list
	} from '@/api/base/index';
	export default {
		components: {
			TableBar
		},
		data() {
			return {
				teamCount: 0,
				teamList: [],
				imgHost: HTTP_REQUEST_URL,
				safeTop: 0,
				contentTop: 0,
				loading: false
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '我的团队'
			})

			const {
				barTop
			} = this.$util.getWXStatusHeight()
			this.safeTop = barTop
			this.contentTop = barTop + 40
		},
		onShow() {
			// 可在此处加载真实团队数据（如调用 /api/team/list）
			// this.getTeamList()
			// this.teamList[0] = {nickname: '123',signing_time: '2025-02-15'}
			// this.teamList[1] = {nickname: '123',signing_time: '2025-02-15'}
			// this.teamList[2] = {nickname: '123',signing_time: '2025-02-15'}
			// this.teamCount = 3
			this.getTeamList()
		},
		methods: {
			async getTeamList() {
				this.loading = true
				try {
					const res = await getTeam_list(1, 100)
					if (res.status === 200) {
						// 接口返回的是 list，直接赋值
						this.teamList = res.data.list || []
						this.teamCount = res.data.total
					} else {
						uni.showToast({
							title: res.msg || '获取失败',
							icon: 'none'
						})
						this.teamList = []
					}
				} catch (error) {
					console.error('获取团队列表失败:', error)
					uni.showToast({
						title: '获取团队失败',
						icon: 'none'
					})
					this.teamList = []
				} finally {
					this.loading = false
				}
			},
			goBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #F2F8FC;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #f9f9f9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 33.4rpx;
		z-index: 100;
	}

	.header-left {
		width: 92.0rpx;
		height: 92.0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		margin-left: -35rpx;
		width: 50.2rpx;
		height: 50.2rpx;
	}

	.header-title {
		font-size: 37.6rpx;
		font-weight: 600;
		color: #333333;
	}

	.header-right {
		width: 92.0rpx;
	}

	.content {
		height: calc(100vh - 83.6rpx);
	}

	.like-list {
		overflow: hidden;
	}

		.container {
			min-height: 100vh;
			background-color: #F2F8FC;
		}
	
		.header {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background-color: #f9f9f9;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 33.4rpx;
			z-index: 100;
		}
	
		.header-left {
			width: 92.0rpx;
			height: 92.0rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		.back-icon {
			margin-left: -35rpx;
			width: 50.2rpx;
			height: 50.2rpx;
		}
	
		.header-title {
			font-size: 37.6rpx;
			font-weight: 600;
			color: #333333;
		}
	
		.header-right {
			width: 92.0rpx;
		}
	
		.content {
			height: calc(100vh - 83.6rpx);
		}
	
	.team-stats {
		text-align: right;
		font-size: 28rpx;
		color: #666;
		margin: 30rpx;
	}

	.member-list {
		margin-top: 20rpx;
	}
	.member-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		
	}
	.avatar-container {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
	}

	.member-info {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-name {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.invite-time {
		font-size: 24rpx;
		color: #999;
	}
</style>